<template>
	<!-- 购物车 -->
	<view class="Body">
		<view v-for="(item,index) in dataArr" :key="index" @click="Goods(item)" @longpress="LongPress(item)">
			<view @click.stop="Null" @longpress.stop="Null">
				<checkbox :checked="Boolean(item.sc_condition)" @click="CheckedChange(item)" />
			</view>
			<image :src="'/static/Mall/'+item.goodsImg" />
			<view>
				<text>{{item.goodsName}}</text>
				<text>{{item.sc_label}}</text>
				<view>
					<text>￥{{item.sc_money}}</text>
					<view>
						<text @click.stop="Minus(item)" @longpress.stop="Null">-</text>
						<text @click.stop="Null" @longpress.stop="Null">{{item.sc_num}}</text>
						<text @click.stop="Plus(item)" @longpress.stop="Null">+</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="Footer">
		<view>
			<label>
				<checkbox :checked="CheckAll" @click="CheckAllChange" />全选
			</label>
			<text>商品总价：</text>
		</view>
		<text>￥{{money}}</text>
		<view @click="Settlement">去结算</view>
	</view>
</template>

<script>
	import {
		reactive
	} from 'vue';
	import store from '../../store/index.js';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import myRequest from '../../utils/myRequest.js';
	export default {
		setup() {
			let data = reactive({
				dataArr: [],
				money: 0,
				CheckAll: false,
				Goods: function(item) {
					uni.navigateTo({
						url: 'Goods?id=' + item.goodsId
					});
				},
				LongPress: function(item) {
					uni.showModal({
						title: '提示',
						content: '是否删除该商品？',
						success: function(res) {
							if (res.confirm) {
								myRequest({
									url: "/sC_del",
									method: 'POST',
									data: {
										id: item.sc_id,
									}
								}).then((res) => {
									if (res.data.code == 200) {
										uni.showToast({
											title: '删除成功',
											duration: 2000
										});
										data.dataArr.forEach((it, i) => {
											if (it.sc_id == item.sc_id) {
												data.dataArr.splice(i, 1);
												return;
											}
										})
									} else {
										uni.showToast({
											title: '删除失败',
											icon: 'error',
											duration: 2000
										});
									}
								})
							}
						}
					});
				},
				Minus: function(item) {
					if (item.sc_num > 1) {
						item.sc_num -= 1;
						data.ComputeMoney();
						data.EditNum(item.sc_id, item.sc_num);
					}
				},
				Plus: function(item) {
					if (item.sc_num < 99) {
						item.sc_num += 1;
						data.ComputeMoney();
						data.EditNum(item.sc_id, item.sc_num);
					}
				},
				CheckedChange: function(item) {
					item.sc_condition = Number(!item.sc_condition);
					myRequest({
						url: "/sC_editCondition",
						method: 'POST',
						data: {
							id: item.sc_id,
							condition: item.sc_condition
						}
					})
					data.ComputeMoney();
					data.ComputeCheckAll();
				},
				CheckAllChange: function() {
					data.CheckAll = !data.CheckAll;
					data.dataArr.forEach((item, index) => {
						item.sc_condition = Number(data.CheckAll);
						myRequest({
							url: "/sC_editCondition",
							method: 'POST',
							data: {
								id: item.sc_id,
								condition: item.sc_condition
							}
						})
					})
					data.ComputeMoney();
				},
				Settlement: function() {
					if (data.money == 0) {
						uni.showToast({
							title: '请选择商品',
							icon: 'error',
							duration: 2000
						});
					} else {
						store.commit('emptyOrderPayGoods');
						data.dataArr.forEach((item) => {
							if (item.sc_condition == 1) {
								store.commit('pushOrderPayGoods', item);
							}
						})
						store.commit('editCartORgoods', 1);
						uni.navigateTo({
							url: 'GoodsSettlement'
						});
					}
				},
				// 数量修改请求
				EditNum: function(e_id, e_num) {
					myRequest({
						url: "/sC_editNum",
						method: 'POST',
						data: {
							id: e_id,
							num: e_num
						}
					})
				},
				// 计算总价钱
				ComputeMoney: function() {
					data.money = 0;
					data.dataArr.forEach((item, index) => {
						if (item.sc_condition == 1) {
							data.money += (item.sc_money * item.sc_num);
						}
					})
				},
				// 计算全选
				ComputeCheckAll: function() {
					data.CheckAll = false;
					for (let i = 0; i < data.dataArr.length; i++) {
						if (data.dataArr[i].sc_condition == 0) {
							return;
						}
					}
					data.CheckAll = true;
				},
				Null: function() {}
			});
			onShow(function() {
				myRequest({
					url: "/sC_get",
					method: 'POST',
					data: {
						id: store.state.userdata[0].vipId
					}
				}).then((res) => {
					if (res.data.code == 200) {
						data.dataArr = res.data.data;
						data.ComputeMoney();
						data.ComputeCheckAll();
					}
				})
			})
			return data;
		},
	}
</script>

<style>
	.Body {
		padding-bottom: 120rpx;
		font-size: 28rpx;
		background-color: #F9F9F9;
	}

	.Body>view {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background-color: #FFFFFF;
	}

	.Body>view:not(:nth-of-type(1)) {
		margin-top: 20rpx;
	}

	.Body>view>view:nth-child(1) {
		width: 95rpx;
		text-align: center;
	}

	.Body>view>image {
		width: 230rpx;
		height: 170rpx;
	}

	.Body>view>view:nth-child(3) {
		width: 385rpx;
		height: 170rpx;
		padding: 0 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.Body>view>view:nth-child(3)>text:nth-child(2) {
		color: #CCCCCC;
	}

	.Body>view>view:nth-child(3)>view {
		display: flex;
		justify-content: space-between;
	}

	.Body>view>view:nth-child(3)>view>text {
		color: #FF0000;
	}

	.Body>view>view:nth-child(3)>view>view {
		color: #999999;
	}

	.Body>view>view:nth-child(3)>view>view>text {
		display: inline-block;
		width: 60rpx;
		text-align: center;
		border: 1rpx solid #999999;
	}

	.Body>view>view:nth-child(3)>view>view>text:nth-of-type(1) {
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-right: none;
	}

	.Body>view>view:nth-child(3)>view>view>text:nth-of-type(3) {
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		border-left: none;
	}

	.Footer {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		font-size: 28rpx;
		color: #808080;
		background-color: #FFFFFF;
		border-top: 1rpx solid #F9F9F9;
		box-sizing: border-box;
	}

	.Footer>view:nth-child(1)>label {
		padding: 0 30rpx;
	}

	.Footer>text {
		flex: 1;
		font-size: 36rpx;
		color: #FF0000;
	}

	.Footer>view:nth-child(3) {
		width: 200rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		color: #FFFFFF;
		background-color: #3478F7;
	}
</style>
